<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Curd案例-英雄管理</title>
    <style>
        [v-cloak] {
            display: none;
        }
        .form {
            border: 1px solid #000;
            padding: 20px;
        }
        .form .form-item {
            margin-bottom: 5px;
        }
        .hero-list {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h1>Curd案例-英雄管理</h1>
        <form class="form">
            <div class="form-item">
                <label>名称：</label>
                <input type="text" v-model="herosForm.name">
            </div>
            <div class="form-item">
                <label>性别</label>
                <input type="radio" value="男" v-model="herosForm.gender"> 男
                <input type="radio" value="女" v-model="herosForm.gender"> 女
            </div>
            <div class="form-item">
                <label>定位</label>
                <select v-model="herosForm.type">
                    <option value="坦克">坦克</option>
                    <option value="战士">战士</option>
                    <option value="刺客">刺客</option>
                    <option value="法师">法师</option>
                    <option value="辅助">辅助</option>
                </select>
            </div>
            <div class="form-item">
                <label>简介</label>
                <textarea v-model="herosForm.bio"></textarea>
            </div>
            <div class="form-item">
                <button @click.prevent="handleAdd">添加</button>
            </div>
        </form>
        
        <table class="hero-list" border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>简介</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in heros">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.bio }}</td>
                    <td>
                        <button @click="handleDelete(item)">删除</button>
                        <button>修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                heros: [],   // 初始化一个模版数据，默认是空数组
                herosForm: {
                    name: '',
                    gender: '',
                    type: '',
                    bio: ''
                }
            },
            
            // 当 Vue 初始化完成以后会自动调用这个函数
            // 例如我们需要页面加载好，去发送请求就加载到这里
            created () {
                // Vue 编译完之后，会自己来调用这个函数
                // console.log(1)  // 测试
                // axios({
                //     method: 'GET',
                //     url: 'http://localhost:3000/heros1'
                // }).then(res => {
                //     // 模版只能使用 Vue 实例的数据
                //     // 所以我们要把请求得到的是数据，放到 Vue 实例中
                //     console.log(res.data)
                //     this.heros = res.data
                // })

                // created 或者是 methods 等函数中可以通过 Vue 实例访问 methods 中的成员
                // 就想你通过 Vue 实例访问 data 中的成员一样
                // 初始化的时候，调用 this.loadHeros()       加载数据列表
                // this.loadHeros()    就能访问到 methods 函数中封装的 loadHeros（）{axios} 方法
                this.loadHeros()
                
            },
            methods: {
                handleDelete (item) {
                    if (!window.confirm("确认要删除吗？")){
                        return
                    }

                    axios({
                        method: 'DELETE',
                        url: `http://localhost:3000/heros1/${item.id}`
                    }).then(res => {
                        console.log(res.data)

                        // 同样函数与函数中间，互相调用
                        // 在删除成功方法中，接下来可以，this.loadHeros()
                        // 删除成功后，调用 this.loadHeros() ，重新加载，获取最新的数据列表
                        // 说白了，实例可以访问 methods 中的数据，就想访问 data 中的数据一样，访问 methods 中的函数也是可以的
                        this.loadHeros()
                    })
                },

                loadHeros () {
                    axios({
                        method: 'GET',
                        url: 'http://localhost:3000/heros1'
                    }).then(res => {
                        console.log(res.data)
                        this.heros = res.data
                    })
                },

                handleAdd () {
                    // console.log('handleAdd') // 测试

                    // 1.获取表单数据
                    const { herosForm } = this
                    // 2.请求提交
                    axios({
                        method: 'POST',
                        url: 'http://localhost:3000/heros1',
                        data: herosForm
                    }).then(res => {
                        // 3.更新数据列表
                        this.loadHeros()

                        // 清空表单数据
                        for (let key in this.herosForm){
                            this.herosForm[key] = ""
                        }
                    })
                    
                }

            }
        })
    </script>
</body>
</html>